<template>
  <transition name="el-zoom-in-center">
    <div class="jsbos-preview-main">
      <div class="jsbos-common-page-header">
        <el-page-header @back="goBack" :content="content" />
        <div class="options">
          <!-- <el-button type="primary" @click="dataFormSubmit()"> 保 存</el-button> -->
          <el-button @click="goBack"> 取 消</el-button>
        </div>
      </div>
      <!-- <el-tabs style="margin-left: 10px;" v-model="active" @tab-click="handleClick"> -->
      <!-- <el-tab-pane label="答题情况" name="1"> -->
      <el-row
        :gutter="24"
        class="main"
        :style="{ margin: '0 auto', width: '100%' }"
      >
        <el-col :span="24">
          <div style="text-align: center">
            <h1>{{ orderName }}</h1>
          </div>
        </el-col>
        <el-col :span="24">
          <div style="text-align: center; width: 100%">
            <el-card
              v-for="(item, i) in orderItemList"
              :key="i"
              style="
                margin-top: 5px;
                width: 800px;
                margin-left: auto;
                margin-right: auto;
              "
            >
              <div>
                <el-button class="fr" type="text" @click="goDetail(item)"
                  >查看详情
                </el-button>
              </div>
              <el-form
                label-width="90px"
                label-position="right"
                class="centered-form"
              >
                <!-- <el-col :span="18">
                      <div style="display: flex; align-items: center;"> -->
                <!-- <span v-if="item.isRequired == '1'" style="color:red;">*</span> -->
                <!-- <el-form-item :label="`${i + 1}. 调查项类型:`" style="margin-left: 5px; margin-bottom: 0;">
                          <el-radio-group v-model="item.itemType" disabled size="small">
                            <el-radio label="radio">单选</el-radio>
                            <el-radio label="multiSelect">多选</el-radio>
                            <el-radio label="writing">填报</el-radio>
                            <el-radio label="scoring">打分</el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </div>
                    </el-col> -->
                <el-col :span="18">
                  <el-form-item :label="`${i + 1}.`">
                    <el-input v-model="item.itemName" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="18" style="margin-left: 200px">
                  <div v-if="item.itemType == 'radio'">
                    <el-radio-group class="vertical-radio-group">
                      <el-radio
                        v-for="order in item.orderRangeItemVOList"
                        :key="order.answer"
                        :label="order.answer"
                      >
                        {{ order.answer }}
                        <el-progress
                          :percentage="order.answerRate"
                        ></el-progress>
                      </el-radio>
                    </el-radio-group>
                  </div>
                </el-col>
                <el-col :span="18" style="margin-left: 200px">
                  <div v-if="item.itemType == 'multiSelect'">
                    <el-checkbox-group
                      v-model="item.itemName"
                      disabled
                      class="vertical-radio-group"
                    >
                      <template
                        v-for="(opt, index) in item.orderRangeItemVOList"
                      >
                        <el-checkbox :key="index" :label="opt">
                          {{ opt.answer }}
                        </el-checkbox>
                        <el-progress
                          :key="opt.answer"
                          :percentage="opt.answerRate"
                        ></el-progress>
                      </template>
                    </el-checkbox-group>
                  </div>
                </el-col>
                <el-col :span="18" style="margin-left: 200px">
                  <div v-if="item.itemType == 'writing'">
                    <el-form-item label="填报人数">
                      <p>{{ item.totalResponses }}人</p>
                    </el-form-item>
                    <el-progress :percentage="item.answerRate"></el-progress>
                  </div>
                </el-col>
                <el-col :span="18" style="margin-left: 200px">
                  <div v-if="item.itemType == 'scoring'">
                    <div
                      v-for="order in item.orderRangeItemVOList"
                      :key="order.answer"
                    >
                      <el-rate
                        v-model="order.answer"
                        :disabled="true"
                        class="custom-rate"
                      ></el-rate>
                      <!-- <div style="margin-top: 10px;"> -->
                      <el-progress :percentage="order.answerRate"></el-progress>
                      <!-- </div> -->
                    </div>
                  </div>
                </el-col>
              </el-form>
            </el-card>
          </div>
        </el-col>
      </el-row>
      <!-- </el-tab-pane> -->
      <!-- <el-tab-pane label="结果展示" name="2"> -->
      <!-- <el-row :gutter="15" :style="{ margin: '0 auto', width: '100%' }">
            <el-form ref="elForm" :model="dataForm" size="small" label-width="100px" label-position="right">
              <template v-if="!loading">
                <el-col :span="9">
                  <el-form-item label="问卷标题" prop="orderName">
                    <p>{{ dataForm.orderName }}</p>
                  </el-form-item>
                </el-col> -->
      <!-- <el-col :span="9">
              <el-form-item label="问卷编码" prop="orderCode">
                <p>{{ dataForm.orderCode }}</p>
              </el-form-item>
            </el-col> -->
      <!-- <el-col :span="9">
                  <el-form-item label="问卷模板" prop="questionnaireName">
                    <p>{{ dataForm.questionnaireName }}</p>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="开放类型" prop="orderType">
                    <p>{{ dataForm.orderType }}</p>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="内部包含范围" prop="orderRange" v-if="dataForm.orderRange">
                    <p>{{ dataForm.orderRange }}</p>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="开始日期" prop="orderStartDate">
                    <p>{{ jsbos.dateFormat(dataForm.orderStartDate) }}</p>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="结束日期" prop="orderEndDate">
                    <p>{{ jsbos.dateFormat(dataForm.orderEndDate) }}</p>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="有效标志" prop="enabledMark">
                    <p>
                      {{ dataForm.enabledMark | dynamicText(enabledMarkOptions) }}
                    </p>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="创建用户" prop="creatorUserId">
                    <p>{{ dataForm.creatorUserId }}</p>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="创建时间" prop="creatorTime">
                    <p>{{ dataForm.creatorTime }}</p>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="问卷调查描述" prop="description">
                    <p>{{ dataForm.description }}</p>
                  </el-form-item>
                </el-col>
              </template>
            </el-form> -->
      <!-- </el-row> -->
      <!-- <el-tabs v-model="activeName" style="margin-left: 5px" type="card" v-if="showTabs">
            <el-tab-pane label="结果展示" name="first">
              <jsbos-table v-loading="listLoading" :data="list">
                <el-table-column prop="itemName" width="500px" label="标题" align="center" />
                <el-table-column prop="itemType" width="100px" label="类型" align="center">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.itemType == 'radio'"> 单选 </el-tag>
                    <el-tag v-if="scope.row.itemType == 'multiSelect'">多选
                    </el-tag>
                    <el-tag v-if="scope.row.itemType == 'scoring'">打分 </el-tag>
                    <el-tag v-if="scope.row.itemType == 'writing'">填报</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="questionItem" width="550px" label="选项" align="center">
                  <template slot-scope="scope">
                    <div v-if="scope.row.itemType == 'radio'">
                      <el-radio-group v-model="scope.row.itemResult">
                        <el-radio-button :label="item" :key="item" v-for="item in scope.row.questionItem" disabled>{{
                          item
                        }}</el-radio-button>
                      </el-radio-group>
                    </div>
                    <div v-if="scope.row.itemType == 'multiSelect'">
                      <el-checkbox-group v-model="scope.row.itemResult">
                        <el-checkbox-button :label="item" :key="item" v-for="item in scope.row.questionItem" disabled>{{
                          item }}</el-checkbox-button>
                      </el-checkbox-group>
                    </div>
                    <div v-if="scope.row.itemType == 'writing'">
                      <span>无</span>
                      <el-input
                    type="textarea"
                    :rows="1"
                    placeholder="请输入内容"
                    v-model="scope.row.itemResult"
                    disabled
                  >
                  </el-input>
                    </div>
                    <div v-if="scope.row.itemType == 'scoring'" disabled="true">
                      <el-rate v-model="scope.row.itemResult" show-text> </el-rate>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" @click="goDetail(scope.row)">查看详情
                    </el-button>
                  </template>
                </el-table-column>
              </jsbos-table>
              <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
                @pagination="initResultData" />
            </el-tab-pane>
          </el-tabs>
          <ViewResults v-if="resultsVisible" ref="results" @refresh="() => {
            resultsVisible = false;
            showTabs = true;
          }
            " :orderId="this.dataForm.id" />
        </el-tab-pane>
      </el-tabs> -->
      <ViewResults
        v-if="resultsVisible"
        ref="results"
        @refresh="
          () => {
            resultsVisible = false;
            showTabs = true;
          }
        "
        :orderId="this.dataForm.id"
      />
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";
import ViewResults from "./ViewResults.vue";
export default {
  components: { ViewResults },
  props: [],
  data() {
    return {
      resultsVisible: false,
      total: 0,
      showTabs: true,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "creatorTime",
      },
      list: [],
      orderItemList: [],
      listLoading: true,
      orderName: "",
      active: "1",
      activeName: "first",
      visible: false,
      loading: false,
      printBrowseVisible: false,
      printId: "",
      content: "调查结果",
      dataForm: {
        id: "",
        questionnaireId: "",
        orderName: "",
        orderCode: "",
        orderRange: [],
        orderStartDate: "",
        orderEndDate: "",
        enabledMark: "1",
        description: "",
        creatorUserId: "",
        creatorTime: "",
      },

      enabledMarkOptions: [
        { fullName: "有效", id: "1" },
        { fullName: "无效", id: "0" },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    goDetail(row) {
      console.log("------", row, this.dataForm.id);
      this.resultsVisible = true;
      this.showTabs = false;
      this.$nextTick(() => {
        this.$refs.results.init(row, this.dataForm.id);
      });
    },
    handleClick(tab, event) {},

    getAnswerSituation(id) {
      request({
        url:
          "/api/questionnaire/OqQuestionnaireOrderRangeItem/getAnswerSituation/" +
          id,
        method: "get",
      }).then((res) => {
        let data = res.data.map((item) => {
          if (item.itemType === "scoring") {
            item.orderRangeItemVOList.forEach((opt) => {
              opt.answer = Number(opt.answer);
            });
          }
          return item; // Ensure to return the modified item
        });
        this.orderItemList = data;
      });
    },
    initResultData() {
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        questId: this.dataForm.questionnaireId,
      };
      request({
        url: `/api/questionnaire/OqQuestionnaireItem/getList`,
        method: "post",
        data: _query,
      }).then((res) => {
        this.list = [];
        for (let i = 0; i < res.data.list.length; i++) {
          if (res.data.list[i].itemType == "multiSelect") {
            res.data.list[i].itemResult = [];
          }
        }
        this.list = res.data.list;
        this.total = res.data.pagination.total;

        this.listLoading = false;
      });
      // this.listLoading = true;
      // let orderId = this.dataForm.id;
      // request({
      //   url:
      //     "/api/questionnaire/OqQuestionnaireOrder/getQuestionnaireResult/" +
      //     orderId,
      //   method: "get",
      // }).then((res) => {
      //   this.list = res.data;
      //   this.listLoading = false;
      // });
    },
    goBack() {
      this.$emit("refresh");
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll;
      this.dataForm = _dataAll;
    },

    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true;
          request({
            url:
              "/api/questionnaire/OqQuestionnaireOrder/detail/" +
              this.dataForm.id,
            method: "get",
          }).then((res) => {
            this.orderName = res.data.orderName;
            this.dataInfo(res.data);
            this.loading = false;
            this.initResultData();
            this.getAnswerSituation(id);
          });
        }
      });
    },
  },
};
</script>
<!-- <style lang="scss" scoped> -->
<!-- // .jsbos-preview-main .main {
//   padding: 10px;
//   flex: 1;
//   overflow: visible;
// }</style> -->
<style lang="scss" scoped>
.centered-form {
  display: flex;
  flex-direction: column;
  /* 垂直排列 */
  align-items: center;
  /* 水平居中 */
}

.vertical-radio-group {
  display: flex;
  flex-direction: column;
  text-align: left;
  /* 设置为垂直方向 */
}

.custom-rate {
  float: left;
  margin-bottom: 10px;
}

.custom-rate ::v-deep .el-rate__icon {
  font-size: 33px;

  /* 调整星星的大小 */
}

.fr {
  float: right;
}

>>> .el-progress-bar {
  padding-right: 65px !important;
}
</style>
